<template>
  <div>
    <my-header v-model="todoVal" @send="addCount" >ToDoList</my-header>
    <!-- 正在进行 -->
    <my-list :list="doing" @changStatus="changCk" @delet="delCount">正在进行--{{doing.length}}个</my-list>
    <!-- 已经完成 -->
    <my-list :list="done" @changStatus="changCk" @delet="delCount">已经完成--{{done.length}}个</my-list>
    <!-- 全部任务 -->
    <my-list :list="list" @changStatus="changCk" @delet="delCount">全部任务--{{list.length}}个</my-list>
  </div>
</template>

<script>
import myHeader from '../components/myHeader.vue'
import myList from '../components/myList.vue'
import { reactive, toRefs ,computed} from 'vue';
import {useStore} from 'vuex'
export default {
  components: {
    myHeader,
    myList
  },
  setup(props) {
    const {commit,state}=useStore()
    const data = reactive({
      todoVal:"",
      list:[],
      doing:[],
      done:[]
    })
    data.list=computed(()=>{
      return state.list
    })
    data.done=computed(()=>{
      return state.list.filter(item=>item.flag)
    })
    data.doing=computed(()=>{
      return state.list.filter(item=>!item.flag)
    })
    //添加数据
    function addCount(){
    commit('addVal',data.todoVal)
    data.todoVal=""
    }
    //改变状态
   function changCk(obj){
      commit('changeCount',obj)
    }
    //删除数据
    function delCount(index){
      commit('del',index)
    }

    return {...toRefs(data),addCount,changCk,delCount}
  }
}
</script>
